{% block sw_sales_channel_detail %}
<sw-page class="sw-sales-channel-detail">
    {% block sw_sales_channel_detail_header %}
    <template #smart-bar-header>
        {% block sw_sales_channel_detail_header_headline %}
        <h2>{{ placeholder(salesChannel, 'name', $tc('sw-sales-channel.detail.textHeadline')) }}</h2>
        {% endblock %}
    </template>
    {% endblock %}

    {% block sw_sales_channel_detail_actions %}
    <template #smart-bar-actions>
        {% block sw_sales_channel_detail_actions_save %}
        <sw-button-process
            v-tooltip.bottom="tooltipSave"
            class="sw-sales-channel-detail__save-action"
            :is-loading="isLoading"
            :process-success="isSaveSuccessful"
            :disabled="!allowSaving || isLoading || productComparison.invalidFileName"
            variant="primary"
            @update:process-success="saveFinish"
            @click.prevent="onSave"
        >
            {{ $tc('sw-sales-channel.detail.buttonSave') }}
        </sw-button-process>
        {% endblock %}
    </template>
    {% endblock %}

    {% block sw_sales_channel_detail_language_switch %}
    <template #language-switch>
        <sw-language-switch
            :save-changes-function="saveOnLanguageChange"
            :abort-change-function="abortOnLanguageChange"
            @on-change="onChangeLanguage"
        />
    </template>
    {% endblock %}

    {% block sw_sales_channel_detail_content %}
    <template #content>
        <sw-card-view>

            {% block sw_sales_channel_detail_content_language_info %}
            <sw-language-info
                :entity-description="placeholder(salesChannel, 'name', $tc('sw-sales-channel.detail.textHeadline'))"
            />
            {% endblock %}

            {% block sw_sales_channel_detail_content_tabs %}
            <sw-tabs
                class="sw-sales-channel-detail-__tabs"
                position-identifier="sw-sales-channel-detail"
            >
                {%  block sw_sales_channel_detail_content_tab_general %}
                <sw-tabs-item
                    :route="{ name: 'sw.sales.channel.detail.base', params: { id: $route.params.id } }"
                    :title="$tc('sw-sales-channel.detail.tabBase')"
                >
                    {{ $tc('sw-sales-channel.detail.tabBase') }}
                </sw-tabs-item>
                {% endblock %}

                {% block sw_sales_channel_detail_content_tab_products %}
                <sw-tabs-item
                    v-if="isHeadless || isStorefront"
                    :route="{ name: 'sw.sales.channel.detail.products', params: { id: $route.params.id } }"
                    :title="$tc('sw-sales-channel.detail.tabProducts')"
                >
                    {{ $tc('sw-sales-channel.detail.tabProducts') }}
                </sw-tabs-item>
                {% endblock %}

                {% block sw_sales_channel_detail_content_tab_theme %}{% endblock %}

                {%  block sw_sales_channel_detail_content_tab_product_comparison %}
                <sw-tabs-item
                    v-if="isProductComparison && !isLoading"
                    :route="{ name: 'sw.sales.channel.detail.productComparison', params: { id: $route.params.id } }"
                    :title="$tc('sw-sales-channel.detail.tabProductComparison')"
                >
                    {{ $tc('sw-sales-channel.detail.tabProductComparison') }}
                </sw-tabs-item>
                {% endblock %}

                {%  block sw_sales_channel_detail_content_tab_analytics %}
                <sw-tabs-item
                    v-if="isStorefront"
                    :route="{ name: 'sw.sales.channel.detail.analytics', params: { id: $route.params.id } }"
                    :title="$tc('sw-sales-channel.detail.tabAnalytics')"
                >
                    {{ $tc('sw-sales-channel.detail.tabAnalytics') }}
                </sw-tabs-item>
                {% endblock %}
            </sw-tabs>
            {% endblock %}

            {% block sw_sales_channel_detail_content_view %}
            <template v-if="isLoading">
                <sw-skeleton />
                <sw-skeleton />
            </template>

            <template v-else>
                <router-view
                    :key="$route.params.id"
                    v-slot="{ Component }"
                >
                    <component
                        :is="Component"
                        :sales-channel="salesChannel"
                        :product-export="productExport"
                        :storefront-sales-channel-criteria="storefrontSalesChannelCriteria"
                        :custom-field-sets="customFieldSets"
                        :is-loading="isLoading"
                        :product-comparison-access-url="productComparison.productComparisonAccessUrl"
                        :template-options="productComparison.templateOptions"
                        :show-template-modal="productComparison.showTemplateModal"
                        :template-name="productComparison.templateName"
                        @template-selected="onTemplateSelected"
                        @access-key-changed="generateAccessUrl"
                        @domain-changed="generateAccessUrl"
                        @invalid-file-name="setInvalidFileName(true)"
                        @valid-file-name="setInvalidFileName(false)"
                        @template-modal-close="onTemplateModalClose"
                        @template-modal-confirm="onTemplateModalConfirm"
                    />
                </router-view>
            </template>
            {% endblock %}
        </sw-card-view>
    </template>
    {% endblock %}

    <template #sidebar>
        {% block sw_sales_channel_detail_sidebar %}
        {% endblock %}
    </template>
</sw-page>
{% endblock %}
